<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li><router-link to="/ProductDescription">成本管理</router-link></li>
        <li><router-link to="/ProductSystem">产品体系</router-link></li>
      </ol>
    </header>
    <div class="ximacontent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
            <div class="content1">
               <div class="title1"><h3>产品体系</h3></div>
               <hr>
               <div class="systemContent">
                <div class="system1">
                    <div class="systemTitle"><h3>绩效考核</h3></div>
                    <div class="systeContent">
                        <table>
                            <tbody>
                                <tr>
                                    <td><div>绩效提升管理</div></td>
                                    <td><div>等级评审</div></td>
                                </tr>
                                <tr>
                                    <td><div>绩效指标分析</div></td>
                                    <td><div>绩时查APP</div></td>
                                </tr>
                                <tr>
                                    <td><div>病案指标测算</div></td>
                                    <td><div>HIS指标测算</div></td>
                                </tr>
                                <tr>
                                    <td><div>医疗质量监测</div></td>
                                    <td><div>等级评审日常统计学</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="system2">
                    <div class="systemTitle"><h3>病案DRG业务</h3></div>
                     <div class="systeContent">
                        <table>
                            <tbody>
                                <tr>
                                    <td><div>病案首页质控</div></td>
                                    <td><div>病案分组管理</div></td>
                                </tr>
                                <tr>
                                    <td><div>绩效评价分析</div></td>
                                    <td><div>医院盈亏分析</div></td>
                                </tr>
                                <tr>
                                    <td><div>临床业务管理</div></td>
                                    <td><div>学科建设发展</div></td>
                                </tr>
                                <tr>
                                    <td><div>医保付费分析</div></td>
                                    <td><div>医保费用管控</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="system3">
                    <div class="systemTitle"><h3>医疗数据上报</h3></div>
                      <div class="systeContent">
                        <table>
                            <tbody>
                                <tr>
                                    <td><div>绩效考核病案</div></td>
                                    <td><div>HQMS</div></td>
                                </tr>
                                <tr>
                                    <td><div>卫统四</div></td>
                                    <td><div>医院盈亏分析</div></td>
                                </tr>
                                <tr>
                                    <td><div>临床业务管理</div></td>
                                    <td><div>学科建设发展</div></td>
                                </tr>
                                <tr>
                                    <td><div>医保付费分析</div></td>
                                    <td><div>医保费用管控</div></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
               </div>
               <div class="system4">
                    <div class="systemTitle"><h3>基础功能</h3></div>
                      <div class="systeContent">
                       <div class="systeConten1">
                            <div>DRG指标计算</div>
                            <div>DRG分组</div>
                            <div>医学知识图谱</div>
                            <div>知识库引擎</div>  
                            <div>深度学习</div>
                            <div>数据清洗</div>
                       </div>
                       <div class="systeConten2">
                            <div>质控引擎</div>
                            <div>虚拟化打印</div>
                            <div>指标计算引擎</div>
                            <div>数据可视化</div>  
                            <div>自然语言处理</div>
                            <div>数据校验转换</div>
                       </div>
                    </div>
               </div>
               <div class="system5">
                    <div class="systemTitle"><h3>数据源</h3></div>
                      <div class="systeContent">
                        <div class="systeContentLeft">
                            <div class="systeConten1">
                                 <div>DRG术语</div>
                                 <div>绩效指标</div>
                                 <div>HIS数据</div>
                                 <div>病案首页</div>
                            </div>
                            <div class="systeConten2">
                                 <div>临床术语</div>
                                 <div>绩效数据</div>
                                 <div>药品物资</div>
                                  <div>LIS数据</div>
                            </div>
                            <div class="systeConten3">
                                 <div>ICD术语</div>
                                 <div>财务年报</div>
                                 <div>EMR数据</div>
                                 <div>合理用药</div>
                            </div>
                       </div>
                        <div class="systeContent4">
                           <img src="../assets/jiantou.png" alt="Paris">
                       </div>
                       <div class="systeContent5">
                          <div>医院业务系统库</div>
                          <div>医院运营系统库</div>
                       </div>
                    </div>
               </div>
               </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li><router-link to="/ProductDescription">产品概述</router-link></li>
                <hr class="simple" color="#6f5499" />
                 <li><router-link to="/ProductSystem">产品体系</router-link></li>
                <hr class="simple" color="#6f5499" />
                <li><router-link to="/InfluenzaSurveillanceReports">流感监测上报</router-link></li>
                 <hr class="simple" color="#6f5499" />
                <li><router-link to="/PerformanceApp">绩时查APP</router-link></li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top:1px solid #ccc;"
                width="100%"
                color="#ccc"
                size="1"
              />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
              <p>
                <img src="../assets/code.jpg" alt="" />
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.title1 h3{
            text-align: left;
            color:#0a77a0;
        }
        .system1,.system2,.system3{
            border:2px dotted #ccc;
            margin-right:1.25rem /* 20/16 */;
            writing-mode:lr-tb;
        }
        .systeContent table tbody tr td div{
            background-color:#0a77a0;
            color:#fff;
            margin:1.25rem /* 20/16 */;
            text-align:center;
            padding:1.25rem /* 20/16 */;
        }
          .systemContent .system1 h3,.systemContent .system2 h3,.systemContent .system3 h3{
              text-align:center;
          }
          .system4,.system5{
              margin-top:1.25rem /* 20/16 */;
              border:2px dotted #ccc;
              writing-mode:lr-tb;
              width:100%;
          }
         .system4 .systemTitle h3,.system5 .systemTitle h3{
                     text-align:center;
         }
         .system4 .systeContent .systeConten1 div,.system4 .systeContent .systeConten2 div{
               background-color:#0a77a0;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */ ;
               color:#fff;
               text-align: center;
               margin-right:1.25rem /* 20/16 */;
               justify-content : space-around;
               margin-bottom:1.25rem /* 20/16 */;
         }
          .system5 .systeContent .systeContentLeft .systeConten1 div,
          .system5 .systeContent .systeContentLeft .systeConten2 div,
          .system5 .systeContent .systeContentLeft .systeConten3 div{
               background-color:#0a77a0;
               color:#fff;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */;
               text-align: center;
               margin-bottom:1.25rem /* 20/16 */;
          }
          
           .systeContent5 div{
              background-color:#0a77a0;
               color:#fff;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */;
               /* text-align:center; */
               margin-bottom:1.25rem /* 20/16 */;
                
          }
          .system5 .systeContent4 {
              text-align:center;
          }
           .system5 .systeContent4 img{
               transform:rotate(90deg);
           }
    .guide {
        width: 100%;
    }
    
    .guideTop {
        background-color: #0a77a0;
        margin-bottom: 1.75rem/* 30/
        16 */
        ;
    }
    
    .guideTop ul {
        list-style-type: none;
    }
    
    .guideTop ul li {
        margin-top: 0.625rem/* 10/16 */
        ;
        height: 2.5rem/* 40/16 */
        ;
        line-height: 2.5rem/* 40/16 */
        ;
        overflow: hidden;
        /*解决高度设置无效的问题*/
    }
    
    .guideTop ul li a {
        color: #fff;
    }
    
    .guideTip .connect_h {
        font-size: 20px;
    }
    
    .guideTip div {
        white-space: nowrap;
    }
    
    .guideTip div span {
        word-break: break-all;
    }
    /* 中等屏幕（桌面显示器，大于等于 992px） */
    
    @media screen and (min-width: 992px) {
        .title1 h3{
            text-align: left;
            color:#0a77a0;
        }
        .systemContent{
            margin:0 auto;
             display: -webkit-flex;
            display:flex;
        }
        .system1,.system2,.system3{
            border:2px dotted #ccc;
            margin-right:1.25rem /* 20/16 */;
        }
        .systeContent table tbody tr td div{
            background-color:#0a77a0;
            color:#fff;
            margin:1.25rem /* 20/16 */;
            text-align:center;
            padding:1.25rem /* 20/16 */;
        }
          .systemContent .system1 h3,.systemContent .system2 h3,.systemContent .system3 h3{
              text-align:center;
          }
          .system4,.system5{
              width:100%;
              margin-top:1.25rem /* 20/16 */;
              border:2px dotted #ccc;
              display:flex;
              padding:1.25rem /* 20/16 */;
              box-sizing: border-box;
          }
         .system4 .systemTitle h3{
              writing-mode: tb-rl; 
          }
          .system4 .systeContent .systeContent1{
              display:flex;
              justify-content : space-between;
              margin-bottom:2.5rem /* 40/16 */;
              margin-top:1.25rem /* 20/16 */;
              vertical-align: middle;
          }
          
         .system4 .systeContent .systeConten1,.system4 .systeContent .systeConten2{
             display:flex;
             margin-bottom:1.25rem /* 20/16 */;
             margin:1.25rem /* 20/16 */ 0;
             
         }
         .system4 .systeContent .systeContent1 div, .system4 .systeContent .systeContent2 div{
               background-color:#0a77a0;
               margin-right:1.25rem /* 20/16 */;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */ ;
               color:#fff;
         }
         
          .system5 .systemTitle h3{
              writing-mode: tb-rl; 
              vertical-align: middle;
          }
          .system5 .systeContent{
              display:flex;
          }
          .system5 .systeContent .systeContentLeft{
              display:flex;
              flex-direction:column; 
          }
          .system5 .systeContent .systeContentLeft .systeConten1 ,
          .system5 .systeContent .systeContentLeft .systeConten2,
          .system5 .systeContent .systeContentLeft .systeConten3{
               margin-bottom:1.25rem /* 20/16 */;
               display:flex;
          }
          .system5 .systeContent .systeContentLeft .systeConten1 div,
          .system5 .systeContent .systeContentLeft .systeConten2 div,
          .system5 .systeContent .systeContentLeft .systeConten3 div{
               background-color:#0a77a0;
               color:#fff;
               margin-right:1.25rem /* 20/16 */;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */;
          }
          .system5 .systeContent .systeContent5{
              align-content: center; 
              display:flex;
          }
          .system5 .systeContent4 img{
              transform:translateY(30%);
          }
          .systeContent5 div{
              background-color:#0a77a0;
               color:#fff;
               margin-right:1.25rem /* 20/16 */;
               padding:.625rem /* 10/16 */ 1.25rem /* 20/16 */;
               writing-mode: vertical-lr;
             writing-mode: tb-lr;
             padding-top:5rem /* 80/16 */;
          }
        .guideTop {
            background-color: #0a77a0;
            margin-bottom: 1.8 75rem;
        }
        .guideTop ul li {
            margin-top: 0.625rem/* 10/16 */
            ;
            height: 2.5rem/* 40/16 */
            ;
            line-height: 2.5rem/* 40/16 */
            ;
            overflow: hidden;
        }
        .guideTip div {
            height: 30px;
        }
        .guideTop div span {
            word-break: break-all;
            word-wrap: break-word;
        }
        .substance {
            width: 100%;
        }
        .substance2,
        .substance3,
        .substance4 {
            float: left;
            width: calc(100% / 3);
        }
        .substance2 {
            border-right: 1px solid #ccc;
        }
        .substance4 {
            border-right: 1px solid #ccc;
        }
        .substance2 p:first-letter {
            font-size: 60px;
            float: left;
            padding-right: 6px;
            font-weight: bold;
            font-family: 黑体;
            color: #0a77a0;
        }
        .substance2 p {
            letter-spacing: 4px;
        }
        .substance3 img {
            text-align: center;
            margin: 0 auto;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .substance4 .areas {
            font-size: 20px;
        }
        .substance4 p {
            font-size: 14px;
            letter-spacing: 4px;
            line-height: 25px;
        }
    }
</style>